import React, {useRef, useState} from 'react';
import bem from '@/utils/bem';
import classNames from 'classnames';
import './btn.scss';

export interface BtnProps {
    btnTitle?: string;
    onClick?: () => void;
    size?: string;
    color?: string;
    disabled?: boolean;
    style?: React.CSSProperties;
}

const defaultProps = {
    btnTitle: '提交',
    onClick: () => undefined,
    size: 'large',
    color: 'red'
} as BtnProps;

const Btn: React.FC<BtnProps> = (props) => {
    const {
        btnTitle,
        onClick,
        style,
        size,
        color,
        ...rest
    } =
    {
        ...defaultProps,
        ...props
    };

    const b = bem('btn');

    const clickStateRef = useRef<boolean>(false);

    const handClick = () => {
        if (clickStateRef.current) {
            return;
        }
        clickStateRef.current = true;
        onClick?.();
        clickStateRef.current = false;
    }
    return (
        <button
            type='button'
            disabled={clickStateRef.current}
            className={classNames(b(), b('' + color), b('' + size))}
            style={style}
            onClick={handClick}>
            {btnTitle}
        </button>
    )
}

export default Btn;